<template>
	<view v-if="temp">
		<view class="edgeInsetTop"></view>
		<view class="wanl-order"> 
			<!-- 头部 -->
			<view class="header">
				<view class="content">
					<view class="contents">
						<view class="status-text">{{stateList[temp.state]}}</view>
						<view class="reason" v-if="temp.status < 3"><text class="reason-text">{{temp.is_transfer_text}}</text></view>
						<view class="reason" v-else><text class="reason-text">驳回理由：{{temp.admin_reason}}</text></view>
					</view>
					<image :src="$wanlshop.oss('/uploads/staticImage/images/user/icon.jpg')" class="status-img" mode=""></image>
					
				</view>
				<view class="line">
					<view class="item" v-for="(item,index) in statusList" :key="index">
						<text class="icon-xuanze1 iconfont"></text>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="lists bg-white padding-top margin-lr-sm radius10" style="margin-top: -40rpx;position: relative;z-index: 99;">
				<view class="cu-list menu-avatar">
					<block>
						<view class="cu-item">
							<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + $wanlshop.oss(temp.goods.goods_image || temp.goods.image, 77, 77) + ')' }" @tap="goGoods(temp.goods.goods_id)" v-if="temp.goods"></view>
							<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + $wanlshop.oss(temp.product.image, 77, 77) + ')' }" @tap="goGoods(temp.product.id)" v-if="temp.product"></view>
							<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + $wanlshop.oss(temp.doctor.image, 77, 77) + ')' }" @tap="goGoods(temp.goods.goods_id)" v-if="temp.doctor"></view>
							<view class="content" @tap="goGoods(temp.goods.goods_id)" v-if="temp.goods">
								<view class="text-cut-2" style="display: -webkit-box;">{{temp.goods.goods_name || temp.goods.title}}</view>
								<view class="wanl_sku text-sm">
									<text class="wanl-gray-dark">{{temp.goods.name || temp.goods.sub_title}}</text>
								</view>
							</view>
							<view class="content" @tap="goGoods(temp.product.id)" v-if="temp.product">
								<view class="text-cut-2" style="display: -webkit-box;">{{temp.product.title}}</view>
								<view class="wanl_sku text-sm">
									<text class="wanl-gray-dark">{{temp.product.title}}</text>
								</view>
							</view>
							<view class="content" @tap="goGoods(temp.doctor.id)" v-if="temp.doctor">
								<view class="text-cut-2" style="display: -webkit-box;">{{temp.doctor.name}}</view>
								<view class="wanl_sku text-sm">
									<text class="wanl-gray-dark" v-if="temp.order_type == 2">图文问诊</text>
									<text class="wanl-gray-dark" v-if="temp.order_type == 3">视频问诊</text>
								</view>
							</view>
							<view class="action text-sm">
								<view class="wanl-gray text-price" v-if="temp.goods">{{temp.goods.price}}</view>
								<view class="wanl-gray text-price" v-if="temp.product">{{temp.product.price}}</view>
								<view class="wanl-gray text-price" v-if="temp.doctor">{{temp.refund_money}}</view>
							</view>
							<button class="cu-btn line-black sm" @tap="applyPlatformRefund" v-if="temp.state == 2"> 申请平台介入</button>
							<button class="cu-btn line-black sm" @tap="modalName = 'logistic'" v-if="temp.state == 1"> 填写物流</button>
						</view>
					</block>
				</view>
			</view>
			<view class="order margin-top-sm bg-white padding-bj margin-lr-sm radius10 margin-bottom-sm">
				<view class="text-sm">
					<view class="title">
						<view class="text-sm">订单详情</view>
					</view>
					<!-- <view class="item">
						<text class="wanl-gray" style="width: 160rpx">订单类型：</text>
						<text> {{temp.order_type_text}} </text>
					</view> -->
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">订单编号：</text>
						<text> {{temp.order_sn}} </text>
						<text class="copy" @tap="$wanlshop.copy(temp.order_sn)">复制</text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">退款单号：</text>
						<text> {{temp.refund_sn}} </text>
						<text class="copy" @tap="$wanlshop.copy(temp.refund_sn)">复制</text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">申请时间：</text>
						<text> {{temp.createtime_text}} </text>
					</view>
					<view class="item" v-if="order_type != 'accompany' && order_type != 'nursing'">
						<text class="wanl-gray" style="width: 160rpx">原因类型：</text>
						<text> {{temp.refund_type_text}} </text>
					</view>
					<view class="item" v-if="order_type == 'accompany'||order_type == 'nursing'">
						<text class="wanl-gray" style="width: 160rpx">申请原因：</text>
						<text> {{temp.reason_txt}} </text>
					</view>
					<view class="item" v-else>
						<text class="wanl-gray" style="width: 160rpx">申请原因：</text>
						<text> {{temp.user_reason_text}} </text>
					</view>
					<!-- <view class="item">
						<text class="wanl-gray" style="width: 160rpx">退款方式：</text>
						<text> {{temp.refund_type_text}} </text>
					</view> -->
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">用户备注：</text>
						<text> {{temp.user_remark || '-'}} </text>
					</view>
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">图片集：</text>
						<block v-if="temp.images">
							<view class="images" v-if="order_type == 'accompany'">
								<image class="margin-right-xs margin-tb-xs" style="width: 80rpx;height: 80rpx;" v-for="(item,index) in temp.images" :key="index" :src="$wanlshop.oss(item)" mode="aspectFill" @tap="$wanlshop.previewImage(temp.images, index)"></image>
							</view>
							<view class="images" v-else>
								<image class="margin-right-xs margin-tb-xs" style="width: 80rpx;height: 80rpx;" v-for="(item,index) in temp.images.split(',')" :key="index" :src="$wanlshop.oss(item)" mode="aspectFill" @tap="$wanlshop.previewImage(temp.images.split(','), index)"></image>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="() => {}">
			<!-- 顶部 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'logistic' ? 'show' : ''" @tap="modalName = null">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content"><view class="text-lg">填写物流</view></view>
						</view>
						<view class="cu-form-group">
							<view class="title">物流公司</view>
							<text @tap="show = true" class="text-left flex-sub text-df" :class="{placeholder:!express_name}">{{express_name || '请选择物流公司'}}</text>
							<text class="wlIcon-fanhui2"></text>
						</view>
						<view class="cu-form-group">
							<view class="title">物流单号</view>
							<input class="text-left text-df" placeholder="请输入物流单号" name="logistic_no" v-model="logistic_no"></input>
						</view>
						<view class="foot padding-lr-bj"><button class="cu-btn bg-green round text-bold complete" @tap="express">完成</button></view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="ExpressList" value-name="code" label-name="name" @confirm="confirm"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_type:'',
			show: false,
			modalName:'',
			stateList:['申请退款，请等待卖家审核','卖家同意，请填写物流信息','卖家拒绝','申请平台介入','成功退款','退款已关闭，感谢您对我们的支持','已提交物流，等待商家收货','第三方退款中','退款失败'],
			// 1=退款申请成功，2=退款完成，3=驳回退款
			orderData: {
				order_no: '',
				address: {
					name: '加载中...',
					mobile: '',
					address: '',
					address_name: ''
				},
				logistics: {
					context: '',
					status: '',
					time: ''
				},
				statetime: ''
			},
			logisticsType: false,
			temp:null,
			statusList:[
				{title:'申请退款'},
				{title:'卖家审核'},
				{title:'退款/拒绝'},
				{title:'填写物流/平台介入'},
				{title:'完成'},
			],
			express_name:'',
			logistic_no:'',
			ExpressList:[]
		};
	},
	onLoad(option) {
		// let data = JSON.parse(option.data);
		// this.temp = data;
		this.order_type = option.type
		this.loadData({refund_sn:option.sn,id:option.id});
		this.getExpressList()
	},
	methods: {
		goGoods(){
			
		},
		confirm(e) {
			this.express_name = e[0].label;
		},
		getExpressList() {
			uni.request({
				url: '/common/getExpressList',
				method:"POST",
				success: res => {
					console.log(res)
					this.ExpressList = res.data
				}
			});
		},
		express() {
			if(!this.express_name) return this.$wanlshop.msg('请选择物流公司');
			if(!this.logistic_no) return this.$wanlshop.msg('请填写物流单号');
			uni.request({
				url: '/payment/refund/express',
				method:"POST",
				data: {
					id: this.temp.id,
					express_name: this.express_name,
					logistic_no: this.logistic_no
				},
				success: res => {
					this.$wanlshop.msg(res.msg)
					this.modalName = null;
					this.loadData({refund_sn:this.temp.refund_sn});
				}
			});
		},
		applyPlatformRefund() {
			this.$wanlshop.to('/pages/user/service')
			// uni.request({
			// 	url: '/payment/refund/applyPlatformRefund',
			// 	method:"POST",
			// 	data: {
			// 		id:this.temp.id
			// 	},
			// 	success: res => {
			// 		this.$wanlshop.msg(res.msg)
			// 		this.loadData({refund_sn:this.temp.refund_sn});
			// 	}
			// });
		},
		// 获取订单
		async loadData(data) {
			let type = this.order_type;
			let url = ''
			switch (type){
				case 'homeking':
					url = '/addons/homeking/api.refund/detail'
					break;
				case 'medicalvisit':
					url = '/addons/medicalvisit/api.refund/detail'
					break;
				case 'nursing':
					url = '/addons/nursing/api.refund/detail'
					break;
				case 'accompany':
					url = '/addons/accompany/api.refund/detail'
					break;
				case 'internethospital':
					url = '/addons/internethospital/api.refund/detail'
					break;
				default:
					break;
			}
			
			await uni.request({
				url: url,
				method:"POST",
				data: data,
				success: res => {
					console.log(res.data)
					this.temp = res.data;
				}
			});
		},
		getImg(status) {
			return ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png", "img_order_signed3x.png", "img_order_closed3x.png", "img_order_signed3x.png", "img_order_closed3x.png"][status - 1];
		},
		getStatusText(status) {
			return ["等待您付款", "付款成功", "待收货", "待评论", "退款订单", "订单已完成", "交易关闭"][status - 1];
		},
		getRefund(status) {
			return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
		},
	}
};
</script>

<style lang="less">
	.wanl-order .header {
		width: 100%;
		min-height: 280rpx;
		position: relative;
		/* background-color: #f72b36; */
		background-image: linear-gradient(#d77e64,#d3655a);
		padding-bottom: 60rpx;
	}
	
	.wanl-order .header .img-bg {
		width: 100%;
		height: 280rpx;
	}
	
	.wanl-order .header .content {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 60rpx;
		box-sizing: border-box;
	}
	.wanl-order .header .contents{
		width: calc(100% - 100rpx);
	}
	
	.wanl-order .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}
	
	.wanl-order .header .reason {
		font-size: 24rpx;
		line-height: 34rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}
	
	.wanl-order .header .reason-text {
		padding-right: 12rpx;
	}
	
	.wanl-order .header .status-img {
		width: 100rpx;
		height: 116rpx;
		display: block;
	}
	
	
	
	
	.wanl-order .lists .shopname {
	    margin: 25rpx 25rpx 30rpx 25rpx;
	}
	.wanl-order .lists .price>view{
		display: flex;
		align-items: center;
		justify-content:space-between;
		height: 40rpx;
	}
	
	.wanl-order .lists .cu-btn{
		font-size: 22rpx;
		padding: 0 14rpx;
	}
	
	
	
	
	.cu-list.menu-avatar>.cu-item{
		height: 160rpx;
		position: relative;
	}
	.cu-list.menu-avatar>.cu-item button{ 
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}
	.cu-list.menu-avatar>.cu-item .content{
		line-height: 1.4;
	}
	
	.wanl-order .order .title{
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: space-between;
	}
	.wanl-order .order .item{
		display: flex;
		padding-top: 30rpx;
	}
	.wanl-order .order .foot{
		display: flex;
		justify-content: space-around;
		justify-items: center;
		align-items: center;
		padding-top: 25rpx;
		margin-top: 20rpx;
	}
	.wanl-order .order .foot text[class*="wlIcon-"]{
		color: #0081FF;
		margin-right: 10rpx;
		font-size: 32rpx;
	}
	
	.line {
		display: flex;
		justify-content: center;
		align-items: center;
		.item {
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
			position: relative;
			&::after {
				position: absolute;
				content: "";
				display: inline-block;
				height: 2px;
				width: calc(100% - 20rpx);
				top: 8rpx;
				left: 40rpx;
				background-color: #fff;
			}
			&:last-child {
				&::after {
					width: 0;
				}
			}
			text {
				color: #fff;
				&:nth-child(1) {
					font-size: 20rpx;
					background-color: transparent;
				}
				&:nth-child(2) {
					font-size: 22rpx;
				}
			}
		}
	}
	.copy {
		font-size: 20rpx;
		border: 1px solid #dddddd;
		border-radius: 50rpx;
		padding: 2rpx 20rpx;
		margin-left: 20rpx;
	}
</style>
